<template>
  <view class="wuliu">
    <uni-nav-bar
      title="物流详情"
      color="#fff"
      backgroundColor="transparent"
      :border="false"
      :statusBar="true"
      :fixed="true"
      @clickLeft="$c.back()"
    >
      <view class="uni-nav-bar-l-icon" slot="left">
        <view class="uni-nav-bar-l-icon-left icon">
          <image :src="$img('/static/img2/cc20.png')" lazy-load></image>
        </view>
      </view>
    </uni-nav-bar>

    <view class="status">
      <view class="status_image">
        <image :src="imgurl.goodslist_imgurl"></image>
        <view class="status_foot">{{ imgurl.num }}件</view>
      </view>
      <view>
        <view class="sta_1">
          物流状态：
          <text>
            <!-- {{ imgurl.delivery_status }} -->

            <template v-if="imgurl.status == 2">待发货</template>
            <template v-if="imgurl.status == 3">待收货</template>
            <template v-if="imgurl.status == 4">已完成</template>
          </text>
        </view>
        <view class="sta_2">快递公司：{{ imgurl.courier_name }}</view>
        <view class="sta_3">
          快递单号：{{ imgurl.courier_number }}

          <view class="copy" @click="copy(imgurl.courier_number)">
            <image :src="$img('/static/img2/cc128.png')" lazy-load></image>
          </view>
        </view>
      </view>
    </view>

    <view v-if="tracesData.length > 0" class="news_z">
      <view v-for="(item, index) in tracesData" :key="index" class="con">
        <view class="con_l">
          <view :class="index == 0 ? 'yuan2' : 'yuan'">
            <!-- <view v-if="index == 0" class="yuan3"></view> -->
          </view>
        </view>
        <view
          class="con_r"
          :style="index == 0 ? 'color:#E40D1D' : 'color:#fff'"
        >
          <view class="title" :style="index == 0 ? 'font-size:28rpx' : ''">
            {{ item.status }}
          </view>
          <view
            class="time"
            :style="index == 0 ? 'color:#E40D1D' : 'color:#fff'"
          >
            {{ item.time }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tracesData: [],
      imgurl: {}
    }
  },
  onLoad(e) {
    this.getData(e.id)
  },
  methods: {
    back() {
      uni.navigateBack()
    },

    getData(e) {
      let that = this
      that.req({
        url: 'express_detail',
        data: {
          order_id: e
        },
        success(res) {
          if (res.status == 1) {
            that.imgurl = res.data.order
            that.tracesData = res.data.express.list
            // that.tracesData = [
            //   {
            //     status: '状态状态状态状态状态状态',
            //     time: '时间时间'
            //   },
            //   {
            //     status: '状态状态状态状态状态状态',
            //     time: '时间时间'
            //   },
            //   {
            //     status: '状态状态状态状态状态状态',
            //     time: '时间时间'
            //   }
            // ]
          }
        }
      })
    },
    copy(value) {
      uni.setClipboardData({
        data: value, //要被复制的内容
        success: () => {
          //复制成功的回调函数
          uni.showToast({
            //提示
            title: '复制成功'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.qiehuan_line {
  margin: -10rpx auto;
  width: 30rpx;
  height: 20rpx;
  border-bottom: 2rpx solid #ff7514;
  border-radius: 2rpx;
}

.news_z {
  width: 690rpx;
  margin: 20rpx auto 0;
  background: #252525;
  border: 2rpx solid #444444;
}

.yuan3 {
  width: 24rpx;
  height: 24rpx;
  background: #1ff7f0;
  border-radius: 50%;
}

.yuan2 {
  background: #e40d1d;
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.time {
  color: #ffffff;
  margin-top: 20rpx;
}

.con_l {
  width: 120rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  /* border: 1px solid red; */
}

.title {
  /* color: rgba(255, 255, 255, 0.6); */
  line-height: 36rpx;
}

.con_r {
  width: 600rpx;
  font-size: 24rpx;
  border-bottom: 1rpx solid #666666;
  padding: 20rpx 0;
  margin-right: 20rpx;
  box-sizing: border-box;
}

.yuan {
  width: 24rpx;
  height: 24rpx;
  background: #fff;
  border-radius: 50%;
}

.con {
  display: flex;
  align-items: center;
  width: 100%;

  &:last-child {
    .con_r {
      border: 0;
    }
  }
}

.sta_3 text {
  // background: #9f1aff;
  // border-radius: 16rpx;
  font-size: 20rpx;
  margin-left: 24rpx;
  padding: 2rpx 10rpx;
  color: #ffffff;
  border: 1px solid;
  border-image: linear-gradient(90deg, #2dcbff, #ff95fb) 1 1;
}

.sta_2,
.sta_3 {
  margin-top: 24rpx;
  display: flex;
  align-items: center;

  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #ffffff;
}

.copy {
  margin-left: 10rpx;
  width: 68rpx;
  height: 32rpx;

  image {
    width: 100% !important;
    height: 100% !important;
  }
}

.sta_1 text {
  color: #ffffff;
}

.sta_1 {
  margin-top: 10rpx;

  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 32rpx;
  color: #ffffff;
}

.status_foot {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 24rpx;
  color: #ffffff;
  border-radius: 0 0 10rpx 10rpx;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 40rpx;
  text-align: center;
}

.status image {
  width: 170rpx;
  height: 170rpx;
  border-radius: 10rpx;
}

.status_image {
  width: 170rpx;
  height: 170rpx;
  margin-right: 34rpx;
  border-radius: 10rpx;
  position: relative;
}

.status {
  width: 690rpx;
  margin: 20rpx auto 0;
  background: #252525;
  border: 2rpx solid #444444;
  box-sizing: border-box;
  display: flex;
  padding: 30rpx;
}

.wuliu {
  width: 100vw;
  /* background: #000000; */
  min-height: 100vh;
  padding-top: 2rpx;
  padding-bottom: 100rpx;
  box-sizing: border-box;
  position: relative;
  background-attachment: fixed;
  background-size: 100vw 100vh;
}
</style>
